import React, { useState, useMemo } from 'react';
import { DlgVal } from 'manage/type/ctl';
import { is_empty, KFile, BtNum, BtTxt, loc, obj_str, no_del, PanelFind, filter_row, useCmd, useHigh, Btn, GridTable } from 'sui';
import { BindUser } from './user';
import { useAccess } from 'cache';

const GroupView = () => {
    const [open_val, openVal] = useState(false);
    const [high] = useHigh(140, 100);
    const [no_acc] = useAccess();
    const umd = useCmd("file/list/ngp");

    const getRow = useMemo(() => {
        const lst = ["sn", "name"];
        return filter_row(umd.value, lst, umd.filter);
    }, [umd.value, umd.filter]);

    const act = {
        "add": v => umd.update("file/md/ngp", {v: v, sn: obj_str(v, "sn")}, () => umd.hreturn()),
        "edit": v => umd.update("file/md/ngp", {v: v, sn: obj_str(v, "sn")}, () => umd.hreturn()),
    };

    const pact = {
        "add": v => openVal(true),
        "edit": v => openVal(true),
    };

    if (umd.isFin("user")) {
        const hreturn = () => {
            umd.reload();
            umd.hreturn();
        };

        return <BindUser hreturn={hreturn} cur={umd.cur}/>;
    }

    const hDel = (val) => {
        if (no_del()) {
            return;
        }

        umd.update("file/rm/ngp", {"sn": obj_str(val, "sn")});
    };

    const col = [
        {name: loc("l_193"), key: 'index', width: 70, frozen: true},
        {name: loc("l_238"), key: 'e_opt', width: 240, frozen: true, formatter: (props) => {
            const d = props.row;

            const getNum = () => {
                if (d.user) {
                    return d.user.length;
                }

                return 0;
            };

            return (
                <div className="inline-flex">
                    <BtTxt hcmd={() => umd.pact(pact, d, "edit")} disabled={no_acc("rb")}>{loc("l_235")}</BtTxt>
                    <BtTxt hcmd={() => hDel(d)} disabled={no_acc("rb")}>{loc("l_237")}</BtTxt>
                    <BtNum hcmd={() => umd.pact(null, d, "user")} num={getNum()} disabled={no_acc("rb")}>{loc("l_811")}</BtNum>
                </div>
            );
        }},
        {name: loc("l_495"), key: 'sn', width: 200},
        {name: loc("l_228"), key: 'name', width: 300},
    ];

    const hImport = (val) => {
        if (is_empty(val)) {
            alert(loc("l_276"));
            return;
        }

        const ret = {};
        val.forEach(d => ret[obj_str(d, "sn")] = d);

        umd.update("file/modify/ngp", {v: ret});
    };

    const getList = () => ["sn", "name"];

    const rowTempl = () => {
        const tmp = getList();
        if (is_empty(tmp)) {
            return null;
        }

        const v = {};
        tmp.forEach(k => v[k] = "1");

        return [v];
    };

    const Right = () => (
        <div className="inline-flex">
            <KFile umd={umd} title={loc("l_812")} col={getList()} row={rowTempl()} hcmd={hImport} no_acc_in={no_acc("rb")}/>
            <Btn color="green" hcmd={() => umd.pact(pact, null, "add")} className="ml-3" disabled={no_acc("rb")}>{loc("l_239")}</Btn>
        </div>
    );

    return (
        <div className="flex flex-col">
            <PanelFind left={loc("l_812")} right={<Right/>} hcmd={umd.setFilter}/>
            <GridTable high={high} col={col} row={getRow} rowHeight={45}/>
            <DlgVal open={open_val} hcmd={v => umd.act(act, v)} setOpen={openVal} data={umd.cur} main={umd.value}/>
        </div>
    );
};

export {GroupView};
